<template>
    <div style="width: 100%;height: 100%;background: #667aa6">
        <div style="position: absolute;width:100%;height:100vh">
            <video src="https://yxys.io/plugin.mp4" autoplay loop preload style="width:100px; height: 100vh; object-fit: cover;"/>
        </div>
        <div class="login-bg"></div>
        <div class="unlock-con">
            <unlock :show-unlock="showUnlock" @on-unlock="handleUnlock"></unlock>
        </div>
    </div>
</template>

<script>
import unlock from "./unlock.vue";
import Cookies from "js-cookie";
export default {
  components: {
    unlock
  },
  data() {
    return {
      showUnlock: false
    };
  },
  methods: {
    handleUnlock() {
      let lockScreenBack = document.getElementById("lock_screen_back");
      this.showUnlock = false;
      lockScreenBack.style.zIndex = -1;
      lockScreenBack.style.boxShadow = "0 0 0 0 #667aa6 inset";
      this.$router.push({
        name: Cookies.get("last_page_name") // 解锁之后跳转到锁屏之前的页面
      });
    }
  },
  mounted() {
    this.showUnlock = true;
    if (!document.getElementById("lock_screen_back")) {
      let lockdiv = document.createElement("div");
      lockdiv.setAttribute("id", "lock_screen_back");
      lockdiv.setAttribute("class", "lock-screen-back");
      document.body.appendChild(lockdiv);
    }
    let lockScreenBack = document.getElementById("lock_screen_back");
    lockScreenBack.style.zIndex = -1;
  }
};
</script>
<style lang="less" scoped>
.login-bg {
  background: black;
  opacity: 0.7;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}
</style>
